import React, { useInsertionEffect, useEffect, useLayoutEffect } from 'react'

export default function App() {

    // 最后执行
    useEffect(() => {
        console.log('useEffect');
    }, [])

    // 在 useInsertionEffect 之后执行
    useLayoutEffect(() => {
        console.log('useLayoutEffect');
    }, [])

    // 最先执行
    useInsertionEffect(() => {
        console.log('useInsertionEffect');
    }, [])


    // useCSS 是自定义的 hooks 
    // 所以在里面可以使用 react 的 hooks 
    // react 的 hooks 只能在函数组件的最外层和自定义 hooks 的时候使用
    function useCSS(rule) {
        useInsertionEffect(() => {
            document.getElementById('title').style.color = rule

            // 如果是一段样式,可以直接添加一段样式内容
            // document.head.appendChild
        }, [])
    }

    useCSS('red')

    return (
        <div>
            <h1 id='title'>你笑起来真好看，快点笑呀。</h1>
        </div>
    )
}
